<template>
  <div class="collect">
    <ul class="ul-one">
      <li @click="$router.go(-1)">
        <img src="../assets/FindImg/4.png" alt="">
      </li>
      <li>收藏</li>
      <li @click="$router.push('/attention')">关注</li>
    </ul>
    <ul class="ul-two">
      <li>全部( <span>1</span> )</li>
      <li>降价</li>
      <li>即将断货</li>
    </ul>
    <div v-if="collectList.length == 0" class="content">
      <img src="../assets/FindImg/5.png" alt="">
      <p>暂无收藏商品。</p>
    </div>
    <div v-if="collectList.length != 0" class="collectlist">
      <span>近一个月收藏</span>
      <dl>
        <dt>
          <img src="../assets/FindImg/6.jpg" alt="">
          <span>多折</span>
        </dt>
        <dd>Nike耐克2020年男子JORDANCOUR TSIDE 23篮球鞋AR1000-104</dd>
        <dd>899</dd>
        <dd>￥899</dd>
        <dd>找相似</dd>
        <!-- 取消收藏 -->
        <dd class="unFocus" @click="unFocus(index)">取消收藏</dd>
      </dl>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
export default {
  name: "Collect",
  data() {
    return {
      collectList: [{ name: "" }, {}]
    };
  },
  methods: {
    unFocus(index) {
      console.log(Dialog);
      Dialog.confirm({
        message: "您确认要取消对该品牌的收藏吗？"
      })
        .then(() => {
          // 确认
          this.collect.splice(index, 1);
        })
        .catch(() => {
          // 取消
        });
    },
  },
};
</script>

<style scoped>
.collect {
  height: 100vh;
  background-color: #eeeeee;
}
.ul-one {
  width: 100%;
  height: 49px;
  background-color: #f6f6f6;
  float: left;
  position: relative;
}
.ul-one li:nth-of-type(1) img {
  width: 18px;
  height: 31px;
  position: absolute;
  top: 11px;
  left: 15px;
}
.ul-one li:nth-of-type(2) {
  color: #1f1f1f;
  position: absolute;
  font-size: 17px;
  top: 16px;
  left: 129px;
}
.ul-one li:nth-of-type(2)::after {
  content: "";
  width: 35px;
  height: 2px;
  display: block;
  background-color: #000000;
  border-radius: 5px;
  position: absolute;
  left: 0;
  bottom: -10px;
}
.ul-one li:nth-of-type(3) {
  color: #888888;
  position: absolute;
  top: 16px;
  left: 223px;
}
.ul-two {
  width: 100%;
  height: 41px;
  display: flex;
  /* justify-content: space-around; */
  background-color: #ffffff;
  align-items: center;
}
.ul-two li:nth-of-type(1) {
  width: 124px;
  height: 20px;
  text-align: center;
  border-right: 1px solid #ededed;
  font-size: 13px;
  font-weight: bold;
  color: #f51112;
}
.ul-two li:nth-of-type(2) {
  width: 124px;
  height: 20px;
  text-align: center;
  border-right: 1px solid #ededed;
  font-size: 13px;
  color: #151515;
}
.ul-two li:nth-of-type(3) {
  width: 124px;
  height: 20px;
  text-align: center;
  font-size: 13px;
  color: #151515;
}
.content {
  width: 100%;
  text-align: center;
}
.content img {
  width: 51px;
  height: 42px;
  margin-top: 52px;
}
.content p {
  color: #767676;
}
.collectlist span {
  display: block;
  height: 26px;
  border-bottom: 1px solid #dfdfdf;
  border-top: 1px solid #dfdfdf;
  font-size: 11px;
  color: #868686;
  line-height: 26px;
  padding-left: 12px;
}
.collectlist dl {
  width: 100%;
  height: 123px;
  background-color: #ffffff;
  position: relative;
  overflow-x: auto;
}
.collectlist dl dt {
  width: 95px;
  height: 95px;
  position: absolute;
  top: 15px;
  left: 15px;
}
.collectlist dl dt img {
  width: 95px;
  height: 95px;
}
.collectlist dl dt span {
  width: 62px;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  text-align: center;
  padding: 0;
  background-color: #ff4d4d;
  color: #ffffff;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 5px;
}
.collectlist dl dd:nth-of-type(1) {
  font-size: 14px;
  color: #0b0b0b;
  position: absolute;
  top: 15px;
  left: 120px;
}
.collectlist dl dd:nth-of-type(2) {
  font-size: 14px;
  color: #000000;
  font-weight: bold;
  position: absolute;
  top: 80px;
  left: 120px;
}
.collectlist dl dd:nth-of-type(3) {
  font-size: 14px;
  color: #818181;
  text-decoration-line: line-through;
  position: absolute;
  top: 80px;
  left: 158px;
}
.collectlist dl dd:nth-of-type(4) {
  width: 74px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  background-color: #fe4765;
  color: #ffffff;
  font-size: 11px;
  position: absolute;
  top: 80px;
  left: 287px;
}
.collectlist dl dd:nth-of-type(5) {
  position: absolute;
  right: -63px;
  width: 63px;
  height: 100%;
  font-size: 12px;
  background-color: #333;
  color: white;
  text-align: center;
  padding: 35px 15px;
  box-sizing: border-box;
}
</style>